<template>
    <div class="visitStatis">
        <div class="header flexbetween mb20">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple" @change="getVisitData"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="card mb20">
            <div class="card-header flexbetween">
                <span class="title">访问趋势图</span>
            </div>
            <div class="card-body" style="height: 380px">
                <echarts :optionData="lineOption"></echarts>
            </div>
        </div>
        <div class="flexbetween betweenCard">
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">来访区域统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportVisit('area')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="height: 500px">
                    <div class="charts">
                        <echarts :optionData="mapOption" isMap></echarts>
                    </div>
                    <div class="topCount">
                        <p class="title">TOP10</p>
                        <div class="topList">
                            <p class="item" v-for="(item,i) in areaTopList" :key="i">
                                <span :class="['iconfont', 'icon-paimingdiyi', `paiming${i}`]" v-if="i <= 2"></span>
                                {{item.name}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">来访渠道统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportVisit('source')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="height: 500px">
                    <div class="charts">
                        <echarts :optionData="pieOption" isMap></echarts>
                    </div>
                    <div class="topCount">
                        <p class="title">TOP10</p>
                        <div class="topList">
                            <p class="item" v-for="(item,i) in sourceTopList" :key="i">
                                <span :class="['iconfont', 'icon-paimingdiyi', `paiming${i}`]" v-if="i <= 2"></span>
                                {{item.name}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import echarts from "@/components/Echarts";
import exportExcel from "@/components/exportExcel";
import { getPieOption, getLineColumnOption, getMapOption } from "@/components/Echarts/option";
import { initFilterTime } from "@/utils/index";
import { mapGetters } from "vuex";
import { getVisitData, exportVisit } from "@/api/robotReport";
export default {
    name: "visitStatis",
    data() {
        return {
            time: "0",
            date: null,
            sourceIds: [],
            lineOption: {},
            mapOption: { yAxis: { axisLine: { show: false } } },
            pieOption: { yAxis: { axisLine: { show: false } } },
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            areaList: [],
            sourceLists: [],
        }
    },
    methods: {
        getVisitData() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            getVisitData(param).then(resp => {
                if (resp.status == 0) {
                    var { dateList, source, area } = resp.data;
                    var date = [];
                    dateList.forEach((item) => { date.push(item.substring(5)) });
                    this.getLineColumnData(resp.data, date);
                    this.getMapData(area);
                    this.getPieData(source);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        dateRangeChange() {
            this.time = "";
            this.getVisitData();
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.getVisitData();
        },
        getLineColumnData(data, dateList = []) {
            let lineOption = {
                legend: {
                    data: ['接待量', '有效会话量', '转人工量', '转人工率'],
                },
                dataZoom: [{ show: dateList.length > 31 }],
                grid: { bottom: dateList.length > 31 ? "30px" : "0%" },
                xAxis: [{ data: dateList }],
                yAxis: [{ name: '次数' }, { name: '转人工率' }],
                series: [
                    {
                        name: '接待量',
                        type: 'line',
                        color: "#FF9A84",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(255, 154, 132,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.receptions || []
                    },
                    {
                        name: '有效会话量',
                        type: 'line',
                        color: "#6B5EE2",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(142, 121, 255,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.validReceptions || []
                    },
                    {
                        name: '转人工量',
                        type: 'line',
                        color: "#0EB8D8",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(14, 184, 216,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: data.seatTakeCountList || [],
                    },
                    {
                        name: '转人工率',
                        type: 'bar',
                        color: "#537EF7",
                        yAxisIndex: 1,
                        itemStyle: {
                            borderRadius: [6, 6, 0, 0] //柱状图圆角
                        },
                        barWidth: 30,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: data.seatTakeRatioList || [],
                    },
                ]
            };
            this.lineOption = getLineColumnOption(lineOption);
        },
        getMapData(areaList = []) {
            this.areaList = (areaList.sort((a, b) => { return b - a }));
            let mapOption = {
                series: [{ data: areaList }]
            };
            this.mapOption = getMapOption(mapOption);
        },
        getPieData(sourceList = []) {
            sourceList = JSON.parse(JSON.stringify(sourceList).replace(/sourceName/g, 'name').replace(/ratio/g, 'value'));
            this.sourceLists = sourceList.sort((a, b) => { return b.value - a.value });
            var pieOption = {
                series: [{ data: sourceList }]
            };
            this.pieOption = getPieOption(pieOption);
        },
        exportVisit(type) {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            this.$refs.exportExcel.showLoading();
            var url = type == "area" ? "/v1/admin/statistic/visit/exportArea" : "/v1/admin/statistic/visit/exportSource";
            var fileName = type == "area" ? "来访区域统计" : "来访渠道统计";
            exportVisit(url, param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports(fileName, resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
    },
    created() {
        this.date = initFilterTime(0);
        this.getVisitData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
        areaTopList() {
            return this.areaList.slice(0, 10);
        },
        sourceTopList() {
            return this.sourceLists.slice(0, 10);
        }
    },
    components: {
        echarts,
        exportExcel
    }
}

</script>

<style lang="scss">
.visitStatis {
    .betweenCard {
        > .card {
            .card-body {
                display: flex;
                .charts {
                    width: 70%;
                }
                .topCount {
                    padding: 50px 0 0 20px;
                }
            }
        }
    }
}
</style>